import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Avatar, List, Rate } from "antd";
import * as React from "react";
import user from "../images/head.jpg";
import { AppointmentComment } from "../type/CommonData";

const styles = (theme: Theme) =>
  createStyles<"root" | "estimate" | "estimateLeft" | "estimateRight">({
    root: {
      marginTop: "10px"
    },
    estimate: {
      display: "flex",
      padding: "5px 20px 5px 20px"
    },
    estimateLeft: {
      padding: "0px 10px 0px 10px"
    },
    estimateRight: {
      display: "flex",
      flexDirection: "column",
      alignContent: "space-between"
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  data: AppointmentComment[];
}
/**
 * 评价组件
 */
class Estimage extends React.Component<Iprops> {
  public render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <List
          dataSource={this.props.data}
          header={"患者评价"}
          bordered={true}
          pagination={{
            pageSize: 8,
            hideOnSinglePage: true,
            showTotal: total => `共 ${total} 条评论`
          }}
          renderItem={(item: AppointmentComment) => (
            <List.Item>
              <div className={classes.estimate}>
                <div className={classes.estimateLeft}>
                  <Avatar size={"large"} src={user} />
                </div>
                <div className={classes.estimateRight}>
                  <div>
                    评价等级：
                    <Rate disabled={true} defaultValue={item.commentLevel} />
                  </div>
                  <div>
                    评价：
                    {item.content}
                  </div>
                </div>
              </div>
            </List.Item>
          )}
        />
      </div>
    );
  }
}

export default withStyles(styles)(Estimage);
